<template>
  <el-dialog
    title="手机扫码观看"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    class="dialog"
    width="324px"
    @open="generateQRCode"
  >
    <div class="qrCodeBox">
      <canvas ref="qrcodeCanvas"></canvas>
    </div>
  </el-dialog>
</template>

<script>
import QRCode from 'qrcode';

export default {
  name: 'QRCode',
  props: {
    roomId: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      dialogVisible: false,
    };
  },
  computed: {
  },
  mounted() {
  },
  methods: {
    generateQRCode() {
      this.$nextTick(() => {
        const url = `${window.location.origin}/h5Live?roomId=${this.roomId}&title=${this.title}`; // 二维码的链接
        const qrcodeCanvas = this.$refs.qrcodeCanvas;
        QRCode.toCanvas(qrcodeCanvas, url, function (error) {
          if (error) {
            console.error(error);
          } else {
            console.log('二维码生成成功！');
          }
        });
      })
    }
  },
};
</script>

<style lang="scss" scoped>
.dialog {
  ::v-deep .el-dialog {
    border-radius: 8px;
  }
  ::v-deep .el-input__inner {
    border-radius: 0;
  }
  ::v-deep .el-button {
    border-radius: 0;
  }
  ::v-deep .el-dialog__body {
    padding: 20px 50px;
    box-sizing: border-box;
  }
  .qrCodeBox {
    width: 100%;
    text-align: center;
  }
}
</style>
